<template>
	<view>
		<el-row>
			<el-form ref="form" v-if="formData && field" :model="formData" :rules="rules" label-width="120px">
				<el-col :span="8" v-for="(meta, _index) in field" :key="_index">
					<el-form-item :label="meta.memo" :required="meta.tagNeed" :prop="meta.name">
						<template v-if="meta.component">
							<component :is="meta.component" v-model:form-data="formData[meta.name]" />
						</template>
						<template v-else-if="meta.dictList">
							<n-com-select v-model="formData[meta.name]" :dictList="meta.dictList" :memo="meta.memo" />
						</template>
						<template v-else-if="meta.type === 3">
							<el-date-picker v-model="formData[meta.name]" type="datetime"
								:placeholder="`请输入${meta.memo}`" value-format="x" style="width: 100%;" />
						</template>
						<template v-else-if="meta.type === 140">
							<n-tags-select v-model:checks="formData[meta.name]" />
						</template>
						<template v-else-if="meta.type === 150">
							<n-param-select v-model:defaultIds="formData[meta.name]" />
						</template>
						<template v-else-if="meta.type === 2">
							<el-input-number v-model.number="formData[meta.name]" :placeholder="`请输入${meta.memo}`" />
						</template>
						<template v-else-if="meta.type === 210">
							<el-input-number v-model.number="formData[meta.name]" :precision="2"
								:placeholder="`请输入${meta.memo}`" />
						</template>
						<template v-else-if="[110, 111, 160, 161].includes(meta.type)">
							<n-upload v-model:fileKey="formData[meta.name]"
								:limit="[110, 160].includes(meta.type) ? 1 : 9">
							</n-upload>
						</template>
						<template v-else>
							<el-input v-model="formData[meta.name]" :placeholder="`请输入${meta.memo}`" />
						</template>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
		<el-row>
			<view class="uni-button-group">
				<button style="width: 100px;" type="primary" class="uni-button"
					@click="submit">{{$t('common.button.submit')}}</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;"><button style="width: 100px;"
						class="uni-button">{{$t('common.button.back')}}</button></navigator>
			</view>
		</el-row>
	</view>
</template>

<script>
	export default {
		props: {
			metadata: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			field() {
				return [...this.metadata.filter(item => !item.hidden), ...this.extendMeta];
			},
			rules() {
				let rules = {};
				this.field.forEach(item => {
					rules[item.name] = []
				});
				return rules;
			}
		},
	}
</script>

<style>
</style>
